gulp 簡介
A toolkit to automate & enhance your workflow => 任務管理器 : 以程式化的方式定義與管理任務。
使用越多工具所需要的前置作業時間就會越多。舉例、當我寫好 code,scss 檔案要先 complie 成 css、 babel 要先 complie 成 ES5.JS、部屬到線上,JS 要做 minify (檔案要先壓縮過)、css 也要壓縮、如果有很多圖片也會需要圖片先壓縮過再放到 server。
因為要做的事情越來越多,我們可以將每件事情看成一個 task,gulp 就是可以讓我們將各種 task 寫到一個 gulp file 裡面。
gulp 可以讓我們以程式的方式寫我們有那些 task,要如何執行、要做甚麼事情。再搭配 gulp 的 plugin,可以將這些東西都綁在一起,使管理任務變得更方便。
有點像 IFTTT (if this then that)
環境建置
安裝過程
裝完後,用 gulp --version
檢視是否成功。
新建一個 gulpfile.js
function defaultTask(cb) {
// place code for your default task here
cb();
}
exports.default = defaultTask
如果用 gulp
怪怪的,就表示 global 有裝錯,這時用 npx 指定用專案的來跑,應該會更好一點。
每一個 task 就相當於一個 funct
gulp 實戰
cb() 是 gulp 提供的 callback funct,呼叫它就等於告訴 gulp 你完成了。
function defaultTask(cb) {
// place code for your default task here
cb(); // call 這個 cb() 它會知道完成
}
exports.default = defaultTask
一、檔案從 A 複製到 B
gulp 也有提供一些內建的東西,src, dest 都是 funct。使用內建的東西,可以把它想像成是資料流的概念。
const {src, dest} = require('gulp')
src() 裡面可以放要做任務的程式碼,以下面為例:它會去讀取 src 資料夾裡面所有 js 的檔案。
function defaultTask() {
// place code for your default task here
return src('src/*.js')
}
使用 .pipe()
進行串接,dest() 表示要寫入哪裡,比方說我們要寫到 dist 的資料夾,就可以這樣寫 dest('dist')
現在 code 長相 => 跑 npx gulp => 底下多了 dist 資料夾,裡面有我原本的檔案
const {src, dest} = require('gulp')
function defaultTask() {
// place code for your default task here
return src('src/*.js')
.pipe(dest('dist'))
}
exports.default = defaultTask
二、BABEL 轉換
用法、
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', () =>
gulp.src('src/app.js')
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(gulp.dest('dist'))
);
可以將它想成一個陣列,經過 .map(bable()) 的轉換,再經過 .map(des()) 的轉換,由 funct 串接組成。
三、compileJS()
我們可以先將這些東西寫成 compileJS() 這個 funct
function compileJS() {
return src('src/*.js')
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(dest('dist'))
}
四、SCSS
關鍵字 : scss gulp
sass 和 scss 很像,很多地方可以共用
npm install sass gulp-sass --save-dev
將 test.scss 放入 src file,接著再 npx gulp,發現 css 資料夾內有檔案,檔案內容是轉好的 css。
function defaultTask() {
return src('src/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(dest('./css'))
}
一樣可以用一個 funct 將它包住
function complieCSS() {
return src('src/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(dest('./css'))
}
五、Series & Parallel
如果想執行兩個以上的 tasks,可以使用 gulp 內建的 series。
將 series 引入
const {src, dest, series} = require('gulp')
依序執行這兩個任務
exports.default = series(complieCSS, compileJS)
但其實這兩件事情可以同時做,引入 parallel,執行的任務會同時跑。
const {src, dest, series, parallel} = require('gulp')
exports.default = parallel(complieCSS, compileJS)
六、 gulp js uglify
將 js 的 code 給壓縮。通常在 server 上的都會是 uglify。
發現 => uglify 後程式碼變成一行,檔案縮小。
function compileJS() {
return src('src/*.js')
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(dest('dist'))
}
七、css minify
function complieCSS() {
return src('src/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(dest('./css'))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename({extname: '.min.css'}))
.pipe(dest('./css'))
}
rename
有最小化過的檔案,副檔名會叫 .min.js 用來和原本的做區別。
先做 babel 後沒有經過壓縮的、再做要壓縮的
const rename = require('gulp-rename')
const cleanCSS = require('gulp-clean-css')
function compileJS() {
return src('src/*.js')
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(dest('dist'))
.pipe(uglify())
.pipe(rename({extname: '.min.js'}))
.pipe(dest('dist'))
}
.pipe(cleanCSS({compatibility: 'ie8'})) 表示你要支援到什麼樣的平台,可能會將一些不必要的 prefix 給去除。
執行個別 task
將 task export 出去,然後 npx gulp task名稱
,就會變成單獨執行任務。如果是 default 就表示我沒有加任何任務名稱。它就會預設執行 default 的任務。
舉例、
exports.complieCSS = complieCSS
cml 打 npx gulp complieCSS
重點回顧
- 用關鍵字找到對的 plugin,找到文件然後使用它
- 將 task 寫好,定義要做甚麼事情、記得前面要先加 return,沒有加會出錯。找適當的 plugin 用,最後再將它串在一起。
- 也可以透過 cb 簡單的建立自己的 task,不依賴現成的。
- gulp 也有 watch 的功能
- 目的 : 管理任務。
比較小的前端網站會用 gulp,在現代的前端開發,react, vue 已經看不到 gulp 的蹤影。會更常用的是 webpack。